<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form ref="form" :inline="true" :model="queryData">
				<el-form-item :label="$t('common.belong_merchant') + ':'">
					<merchant-select
						v-model="queryData.merchantId"
					></merchant-select>
				</el-form-item>
				<el-form-item>
					<el-select
						v-model="timeType"
						:placeholder="$t('common.please_enter')"
						style="width: 150px; margin-right: -4px"
					>
						<el-option
							:label="$t('game.game_betslip.settle_time')"
							value="sunTime"
						></el-option>
						<el-option
							:label="$t('game.game_betslip.bet_time')"
							value="betTime"
						></el-option>
						<el-option
							label="统计时间"
							value="statTime"
						></el-option>
					</el-select>
					<el-date-picker
						v-model="timeTypeOption[timeType]"
						size="medium"
						:picker-options="pickerShortcut2"
						format="yyyy-MM-dd HH:mm:ss"
						type="datetimerange"
						range-separator="-"
						:start-placeholder="$t('common.start_date')"
						:end-placeholder="$t('common.end_date')"
						align="right"
						clearable
						:default-time="defaultTime"
					></el-date-picker>
				</el-form-item>
				<el-form-item
					:label="$t('game.game_betslip.bet_status') + ':'"
					class="tagheight"
				>
					<el-select
						v-model="queryData.obBetStatus"
						style="width: 200px"
						clearable
						:placeholder="$t('common.all')"
						:popper-append-to-body="false"
					>
						<el-option
							v-for="item in betStatusType"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="$t('game.venue_access_manage.venue_type') + ':'"
					prop="venueTypeCode"
				>
					<el-select
						v-model="queryData.venueTypeCode"
						clearable
						:placeholder="$t('common.all')"
						style="width: 210px"
						:popper-append-to-body="false"
					>
						<el-option
							v-for="item in bwVenueTypeList"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="$t('game.venue_name') + ':'"
					prop="venueCodeList"
				>
					<el-select
						v-model="queryData.venueCodeList"
						clearable
						:placeholder="$t('common.all')"
						collapse-tags
						multiple
						style="width: 200px"
						:popper-append-to-body="false"
					>
						<el-option
							v-for="item in bwVenueList"
							:key="item.code"
							:label="item[getKey('venueName')]"
							:value="item.venueCode"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item :label="$t('game.game_manage.game_name') + ':'">
					<el-input
						v-model="queryData.gameTypeName"
						clearable
						size="medium"
						style="width: 200px"
						:placeholder="$t('common.please_enter')"
						:disabled="loading"
						@keyup.enter.native="enterSearch"
					></el-input>
				</el-form-item>
				<!-- 注单号 -->
				<el-form-item>
					<el-select
						v-model="orderType"
						:placeholder="$t('common.please_enter')"
						style="width: 130px; margin-right: -4px"
					>
						<el-option
							:label="$t('game.game_betslip.bet_number')"
							value="id"
						></el-option>
						<el-option
							:label="$t('game.game_betslip.three_bet_number')"
							value="generatedId"
						></el-option>
					</el-select>
					<el-input
						v-if="orderType === 'id'"
						v-model="queryData.id"
						clearable
						size="medium"
						v-input="{ name: 'symbols' }"
						style="width: 240px"
						:placeholder="$t('common.please_enter')"
						:disabled="loading"
						@keyup.enter.native="enterSearch"
					></el-input>
					<el-input
						v-else
						v-input="{ name: 'symbols' }"
						v-model="queryData.generatedId"
						clearable
						size="medium"
						style="width: 240px"
						:placeholder="$t('common.please_enter')"
						:disabled="loading"
						@keyup.enter.native="enterSearch"
					></el-input>
				</el-form-item>
				<!-- 注单号 -->
				<!-- 账号查询 -->
				<el-form-item>
					<el-select
						v-model="memberType"
						:placeholder="$t('common.please_enter')"
						style="width: 200px; margin-right: -4px"
					>
						<el-option
							:label="$t('common.member_number')"
							value="memberName"
						></el-option>
						<el-option
							:label="$t('common.game_number')"
							value="playerName"
						></el-option>
						<el-option
							:label="$t('common.top_agent')"
							value="parentProxyName"
						></el-option>
						<el-option
							label="所属代理"
							value="proxyName"
						></el-option>
						<el-option
							:label="$t('game.game_betslip.general_agent')"
							value="topProxyName"
						></el-option>
					</el-select>
					<el-input
						v-model="queryData[memberType]"
						clearable
						size="medium"
						style="width: 200px"
						:placeholder="$t('common.please_enter')"
						:disabled="loading"
						@keyup.enter.native="enterSearch"
					></el-input>
				</el-form-item>
				<!-- 账号查询 -->
				<el-form-item
					:label="$t('game.game_betslip.bet_device') + ':'"
					class="tagheight"
				>
					<el-select
						v-model="queryData.obDeviceType"
						style="width: 200px; margin-right: 20px"
						multiple
						clearable
						collapse-tags
						:placeholder="$t('common.all')"
						:popper-append-to-body="false"
					>
						<el-option
							v-for="item in betDeviceType"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item :label="$t('game.game_betslip.bet_ip') + ':'">
					<el-input
						v-model.trim="queryData.loginIp"
						clearable
						size="medium"
						style="width: 245px"
						:placeholder="$t('common.please_enter')"
						:disabled="loading"
						@keyup.enter.native="enterSearch"
					></el-input>
				</el-form-item>
				<!-- <el-form-item
						:label="$t('common.vip_level') + ':'"
						class="numberBox"
					>
						<el-input-number
							v-model="queryData.vipLevelMin"
							size="medium"
							:placeholder="$t('game.game_betslip.min_number')"
							:style="
								$i18n.locale === 'zh_CN'
									? `width: 108px`
									: `width: 130px`
							"
							:controls="false"
							:min="0"
							:max="99"
							:precision="0"
							name="vipLevelMin"
							@blur="checkValue($event)"
						></el-input-number>
						-
						<el-input-number
							v-model="queryData.vipLevelMax"
							size="medium"
							:placeholder="$t('game.game_betslip.max_number')"
							:style="
								$i18n.locale === 'zh_CN'
									? `width: 108px`
									: `width: 130px`
							"
							:controls="false"
							:min="0"
							:max="99"
							:precision="0"
							name="vipLevelMax"
							@blur="checkValue($event)"
						></el-input-number>
					</el-form-item> -->
				<el-form-item
					:label="$t('game.game_betslip.bet_amount') + ':'"
					class="numberBox"
				>
					<el-input-number
						v-model="queryData.betAmountMin"
						size="medium"
						:placeholder="$t('game.game_betslip.min_number')"
						:style="
							$i18n.locale === 'zh_CN'
								? `width: 108px`
								: `width: 130px`
						"
						:controls="false"
						:min="0"
						:max="9999999999.99"
						:precision="2"
						name="betAmountMin"
						@blur="checkValue($event)"
					></el-input-number>
					-
					<el-input-number
						v-model="queryData.betAmountMax"
						size="medium"
						:placeholder="$t('game.game_betslip.max_number')"
						:style="
							$i18n.locale === 'zh_CN'
								? `width: 108px`
								: `width: 130px`
						"
						:controls="false"
						:min="0"
						:max="9999999999.99"
						:precision="2"
						name="betAmountMax"
						@blur="checkValue($event)"
					></el-input-number>
				</el-form-item>
				<el-form-item
					:label="$t('game.game_betslip.member_win') + ':'"
					class="numberBox"
				>
					<el-input-number
						v-model="queryData.netAmountMin"
						size="medium"
						:placeholder="$t('game.game_betslip.min_number')"
						:style="
							$i18n.locale === 'zh_CN'
								? `width: 108px`
								: `width: 130px`
						"
						:controls="false"
						:min="-9999999999.99"
						:max="9999999999.99"
						:precision="2"
						name="netAmountMin"
						@blur="checkValue($event)"
					></el-input-number>
					-
					<el-input-number
						v-model="queryData.netAmountMax"
						size="medium"
						:placeholder="$t('game.game_betslip.max_number')"
						:style="
							$i18n.locale === 'zh_CN'
								? `width: 108px`
								: `width: 130px`
						"
						:controls="false"
						:min="-9999999999.99"
						:max="9999999999.99"
						:precision="2"
						name="netAmountMax"
						@blur="checkValue($event)"
					></el-input-number>
				</el-form-item>
				<el-form-item
					label="是否重算"
					prop="obSettleCount"
					v-if="!isReset"
				>
					<el-select
						v-model="queryData.obSettleCount"
						clearable
						:placeholder="$t('common.all')"
						style="width: 200px"
					>
						<el-option label="未重算" :value="0" />
						<el-option label="重算过1次" :value="1" />
						<el-option label="重算过2次" :value="2" />
						<el-option label="重算大于2次" :value="3" />
					</el-select>
				</el-form-item>
				<!-- 	v-if="queryData.venueTypeCode === 'DZ_CARD'" -->
				<el-form-item
					label="注单类型"
					prop="betType"
					v-if="queryData.venueTypeCode === 'DZ_CARD'"
				>
					<el-select
						v-model="queryData.betType"
						clearable
						:placeholder="$t('common.all')"
						style="width: 200px"
					>
						<!-- parseInt(key) 对应 subList 下 type = 1  和 type =2 和type = 13 -->
						<el-option
							v-for="(item, key) in parentBetTypes"
							:key="key"
							:label="item"
							:value="parseInt(key)"
						/>
					</el-select>
				</el-form-item>
				<el-form-item label="业务模式" prop="businessModel">
					<el-select
						v-model="queryData.businessModel"
						clearable
						:placeholder="$t('common.all')"
						style="width: 200px"
					>
						<el-option label="现金模式" :value="1" />
						<el-option label="信用模式" :value="2" />
					</el-select>
				</el-form-item>
				<el-form-item label="是否延迟" prop="delayStatus">
					<el-select
						v-model="queryData.delayStatus"
						clearable
						:placeholder="$t('common.all')"
						style="width: 200px"
					>
						<el-option label="是" value="0" />
						<el-option label="否" value="1" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						:loading="loading"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
					<el-button
						v-if="hasPermission('90870170')"
						icon="el-icon-download"
						type="warning"
						:disabled="exportLoading"
						:loading="exportLoading"
						size="medium"
						@click="exportExcel"
					>
						{{ $t('common.export') }}
					</el-button>
					<el-button
						type="success"
						icon="el-icon-sort"
						:disabled="loading"
						size="medium"
						@click="openColSettings"
					>
						{{ $t('common.row_set') }}
					</el-button>
				</el-form-item>
				<date-picker-shortcuts
					kind="shortcutForButtonsWOPeriod"
					:action="handleShortcutBtnClick"
					:loading="loading"
				/>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:show-summary="!isReset"
				:max-height="tableHeight"
				:data="tableData"
				:header-cell-style="getRowClass"
				:summary-method="(val) => handleRow(val, summary)"
				@sort-change="_changeTableSort"
			>
				<el-table-column
					prop="id"
					fixed="left"
					align="center"
					min-width="200px"
					:label="$t('game.game_betslip.bet_number')"
				>
					<template slot-scope="scope">
						{{ scope.row.betOrderId || scope.row.id }}
					</template>
				</el-table-column>
				<el-table-column
					prop="memberName"
					fixed="left"
					align="center"
					:label="$t('common.member_number')"
					min-width="130px"
				>
					<template slot-scope="scope">
						<Copy
							v-if="!!scope.row.memberName"
							:title="scope.row.memberName"
							:copy="copy"
						>
							{{ scope.row.memberName }}
						</Copy>
						<span v-else>-</span>
					</template>
				</el-table-column>
				<el-table-column
					v-if="
						tableColumnData[
							$t('game.game_betslip.three_bet_number')
						]
					"
					prop="id"
					align="center"
					min-width="200px"
					:label="$t('game.game_betslip.three_bet_number')"
				>
					<template slot-scope="scope">
						{{ scope.row.generatedId }}
					</template>
				</el-table-column>
				<el-table-column
					prop="venueName"
					align="center"
					v-if="
						tableColumnData[
							$t('game.venue_access_manage.venue_type')
						]
					"
					:label="$t('game.venue_access_manage.venue_type')"
					min-width="120px"
				>
					<template slot-scope="scope">
						{{ scope.row.venueTypeName || '--' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="venueName"
					align="center"
					:label="$t('game.venue_name')"
					v-if="tableColumnData[$t('game.venue_name')]"
					min-width="120px"
				>
					<template slot-scope="scope">
						{{ scope.row.venueName || '--' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="gameTypeName"
					align="center"
					:label="$t('game.game_manage.game_name')"
					v-if="tableColumnData[$t('game.game_manage.game_name')]"
					min-width="120px"
				>
					<template slot-scope="scope">
						{{ scope.row.gameTypeName || '--' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="playerName"
					align="center"
					:label="$t('common.game_number')"
					v-if="tableColumnData[$t('common.game_number')]"
					min-width="130px"
				>
					<template slot-scope="scope">
						<Copy
							v-if="!!scope.row.playerName"
							:title="scope.row.playerName"
							:copy="copy"
						>
							{{ scope.row.playerName }}
						</Copy>
						<span v-else>-</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="accountType"
					align="center"
					:label="$t('common.number_type')"
					v-if="tableColumnData[$t('common.number_type')]"
					min-width="130px"
				>
					<template slot-scope="scope">
						{{ typeFilter(scope.row.accountType, 'accountType') }}
					</template>
				</el-table-column>
				<el-table-column
					prop="businessModel"
					align="center"
					label="业务模式"
					min-width="120px"
				>
					<template slot-scope="scope">
						{{
							scope.row.businessModel === 1
								? '现金模式'
								: '信用模式'
						}}
					</template>
				</el-table-column>
				<el-table-column
					prop="merchantName"
					align="center"
					:label="$t('game.game_betslip.merchant_name')"
					v-if="
						tableColumnData[$t('game.game_betslip.merchant_name')]
					"
					min-width="150px"
				>
					<template slot-scope="scope">
						{{ scope.row.merchantName || '-' }}
					</template>
				</el-table-column>

				<el-table-column
					prop="parentProxyName"
					align="center"
					:label="$t('common.top_agent')"
					v-if="tableColumnData[$t('common.top_agent')]"
					min-width="150px"
				>
					<template slot-scope="scope">
						<Copy
							v-if="!!scope.row.parentProxyName"
							:title="scope.row.parentProxyName"
							:copy="copy"
						>
							{{ scope.row.parentProxyName }}
						</Copy>
						<span v-else>-</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="parentProxyName"
					align="center"
					v-if="
						tableColumnData[$t('game.game_betslip.general_agent')]
					"
					:label="$t('game.game_betslip.general_agent')"
					min-width="150px"
				>
					<template slot-scope="scope">
						<Copy
							v-if="!!scope.row.topProxyName"
							:title="scope.row.topProxyName"
							:copy="copy"
						>
							{{ scope.row.topProxyName }}
						</Copy>
						<span v-else>-</span>
					</template>
				</el-table-column>

				<el-table-column
					prop="betAmount"
					align="center"
					:label="$t('game.game_betslip.bet_amount')"
					v-if="tableColumnData[$t('game.game_betslip.bet_amount')]"
					min-width="120px"
					sortable
				>
					<template slot-scope="scope">
						<money
							:value="`${handleCurrency(scope.row.memberCurrency)}
									${handleNumber(scope.row.memberCurrency, scope.row.betAmount)}`"
						/>
					</template>
				</el-table-column>
				<el-table-column
					prop="betType"
					align="center"
					:label="$t('game.game_betslip.parent_betType')"
					v-if="
						tableColumnData[$t('game.game_betslip.parent_betType')]
					"
					min-width="120px"
				>
					<template slot-scope="scope">
						{{ parentBetTypes[scope.row.betType] || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="userHandFee"
					align="center"
					:label="$t('game.game_betslip.pump_contribution')"
					v-if="
						tableColumnData[
							$t('game.game_betslip.pump_contribution')
						]
					"
					sortable
					min-width="150px"
				>
					<template slot-scope="scope">
						<money
							:value="`${handleCurrency(scope.row.memberCurrency)}
						${handleNumber(scope.row.memberCurrency, scope.row.userHandFee)}`"
						/>
					</template>
				</el-table-column>
				<el-table-column
					prop="betType"
					align="center"
					:label="
						$t('game.game_betslip.pump_contribution_contribution')
					"
					v-if="
						tableColumnData[
							$t(
								'game.game_betslip.pump_contribution_contribution'
							)
						]
					"
					sortable
					min-width="150px"
				>
					<template slot-scope="scope">
						<money
							:value="`${handleCurrency(scope.row.memberCurrency)}
						${handleNumber(scope.row.memberCurrency, scope.row.pumpContribution)}`"
						/>
					</template>
				</el-table-column>
				<el-table-column
					prop="validBetAmount"
					align="center"
					:label="$t('game.game_betslip.efficient_bet')"
					v-if="
						tableColumnData[$t('game.game_betslip.efficient_bet')]
					"
					min-width="120"
					sortable
				>
					<template slot-scope="scope">
						<money
							v-if="scope.row.obBetStatus === 1"
							:value="`${handleCurrency(scope.row.memberCurrency)}
						${handleNumber(scope.row.memberCurrency, scope.row.validBetAmount)}`"
						/>
						<span v-else>$0</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="netAmount"
					align="center"
					sortable
					v-if="tableColumnData[$t('game.game_betslip.member_win')]"
					:label="$t('game.game_betslip.member_win')"
					min-width="120"
				>
					<template slot-scope="scope">
						<span :style="handleNumberColor(scope.row.netAmount)">
							{{ handleCurrency(scope.row.memberCurrency) }}
							{{
								handleNumber(
									scope.row.memberCurrency,
									scope.row.netAmount
								)
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="obBetStatus"
					align="center"
					:label="$t('game.game_betslip.bet_status')"
					v-if="tableColumnData[$t('game.game_betslip.bet_status')]"
					min-width="100px"
				>
					<template slot-scope="scope">
						<span
							v-if="scope.row.obBetStatus === 0"
							class="deleteRgba"
						>
							{{
								typeFilter(
									scope.row.obBetStatus,
									'betStatusType'
								)
							}}
						</span>
						<span
							v-else-if="scope.row.obBetStatus === 1"
							class="normalRgba"
						>
							{{
								typeFilter(
									scope.row.obBetStatus,
									'betStatusType'
								)
							}}
						</span>
						<span
							v-else-if="scope.row.obBetStatus === 2"
							class="disableRgba"
						>
							{{
								typeFilter(
									scope.row.obBetStatus,
									'betStatusType'
								)
							}}
						</span>
						<span v-else>-</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="obSettleCount"
					align="center"
					min-width="150px"
					:label="$t('game.game_betslip.ob_settle_count')"
					v-if="
						tableColumnData[$t('game.game_betslip.ob_settle_count')]
					"
				>
					<template slot-scope="scope">
						<span
							v-if="scope.row.obBetStatus === 1"
							:style="{
								color: scope.row.obSettleCount > 0 ? 'red' : ''
							}"
						>
							{{ formatObSettleCount(scope.row.obSettleCount) }}
						</span>
						<span v-else>-</span>
					</template>
				</el-table-column>
				<!-- Primo TODO:: -->
				<el-table-column
					prop="delayStatus"
					align="center"
					min-width="150px"
					label="是否延迟"
				>
					<template slot-scope="scope">
						<span>
							{{ scope.row.delayStatus === '0' ? '是' : '否' }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="delayFirstStatus"
					align="center"
					min-width="150px"
					label="延迟标记"
				>
					<template slot-scope="scope">
						<span>
							{{ scope.row.delayFirstStatus === '0' ? '是' : '否' }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="createAt"
					align="center"
					:label="$t('game.game_betslip.bet_time')"
					v-if="tableColumnData[$t('game.game_betslip.bet_time')]"
					min-width="160px"
				>
					<template slot-scope="scope">
						{{ scope.row.createAtString || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="createAt"
					align="center"
					:label="$t('game.game_betslip.settle_time')"
					v-if="tableColumnData[$t('game.game_betslip.settle_time')]"
					min-width="160px"
				>
					<template slot-scope="scope">
						{{ scope.row.netAtString || '-' }}
					</template>
				</el-table-column>
				<!-- Primo TODO:: -->
				<el-table-column
					prop="createAt"
					align="center"
					label="统计时间"
					min-width="160px"
				>
					<template slot-scope="scope">
						{{ scope.row.statisticalAtString || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="createAt"
					align="center"
					label="重算时间"
					min-width="160px"
					v-if="isReset"
				>
					<template slot-scope="scope">
						{{ scope.row.obCreatedAt || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="createAt"
					align="center"
					label="重算次数"
					min-width="160px"
					v-if="isReset"
				>
					<template slot-scope="scope">
						{{ scope.row.obSettleCount || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="matchId"
					align="center"
					min-width="150px"
					:label="$t('game.game_betslip.match_info')"
					v-if="tableColumnData[$t('game.game_betslip.match_info')]"
				>
					<template slot-scope="scope">
						<span>
							{{ scope.row.matchInfo || '-' }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="betContent"
					align="center"
					:label="$t('game.game_betslip.betting_details')"
					v-if="
						tableColumnData[$t('game.game_betslip.betting_details')]
					"
					min-width="150px"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span v-if="scope.row.gameTypeId < -1">
							<el-link
								type="primary"
								@click="lookBetting(scope.row, scope.$index)"
							>
								{{ scope.row.betContent }}
							</el-link>
						</span>
						<span v-else>{{ scope.row.betContent }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="obDeviceType"
					align="center"
					v-if="tableColumnData[$t('game.game_betslip.bet_ip')]"
					:label="$t('game.game_betslip.bet_ip')"
					min-width="150px"
				>
					<template slot-scope="scope">
						{{ scope.row.loginIp || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="obDeviceType"
					align="center"
					v-if="
						tableColumnData[$t('game.game_betslip.ip_attribution')]
					"
					:label="$t('game.game_betslip.ip_attribution')"
					min-width="150px"
				>
					<template slot-scope="scope">
						{{ scope.row.ipAttribution || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="obDeviceType"
					align="center"
					v-if="tableColumnData[$t('game.game_betslip.bet_device')]"
					:label="$t('game.game_betslip.bet_device')"
					min-width="150px"
				>
					<template slot-scope="scope">
						<span v-if="scope.row.obDeviceType === '其他'">
							{{ scope.row.obDeviceType }}
						</span>

						<span v-else>
							{{  scope.row.obDeviceType === 6 ? 'Robot' : typeFilter(
									scope.row.obDeviceType,
									'loginDeviceType'
								)
							}}
						</span>
					</template>
				</el-table-column>
				<!-- <el-table-column
						prop="vipRebateRate"
						align="center"
						:label="$t('game.game_betslip.return_scale')"
						min-width="120"
					>
						<template slot="header">
							{{ $t('game.game_betslip.return_amount') }}
							<br />
							{{ $t('game.game_betslip.return_scale') }}
						</template>
						<template slot-scope="scope">
							<money
								:value="
									`${handleCurrency(scope.row.memberCurrency)}
						${handleNumber(scope.row.memberCurrency, scope.row.rebateAmount)}`
								"
							/>

							<br />
							{{ (scope.row.vipRebateRate * 100).toFixed(2) }}%
						</template>
					</el-table-column> -->
				<el-table-column
					align="center"
					:label="$t('common.actions')"
					fixed="right"
					min-width="100px"
				>
					<template slot-scope="scope">
						<el-link
							v-if="hasPermission('90870171')"
							type="primary"
							@click="lookMsg(scope.row, scope.$index)"
						>
							{{ $t('common.check_detail') }}
						</el-link>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				:current-page.sync="pageNum"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
		<!-- 查看详情 -->
		<el-dialog
			:title="$t('game.game_betslip.note_details')"
			:visible.sync="detailDialog.visible"
			width="1500px"
			@close="2"
		>
			<div class="game-container report-container">
				<div class="view-container dealer-container">
					<notedetails
						:dataList="dataList"
						:lookMsgList="lookMsgList"
					></notedetails>
					<div
						v-for="detailItem in betHisDetails"
						:key="detailItem.id"
					>
						<realDetails
							v-if="venueTypeCode === 'zr'"
							:dataList="detailItem"
							:lookMsgList="lookMsgList"
						></realDetails>
						<chessDetails
							v-else-if="venueTypeCode === 'qp'"
							:dataList="detailItem"
							:lookMsgList="lookMsgList"
						></chessDetails>
						<sportDetails
							v-else-if="venueTypeCode === 'ty'"
							:dataList="detailItem"
							:lookMsgList="lookMsgList"
						></sportDetails>
						<eSportDetails
							v-else-if="venueTypeCode === 'dj'"
							:dataList="detailItem"
							:lookMsgList="lookMsgList"
						></eSportDetails>
						<lotteryDetails
							v-else-if="venueTypeCode === 'cp'"
							:dataList="detailItem"
							:lookMsgList="lookMsgList"
						></lotteryDetails>
						<eGameDetails
							v-else-if="venueTypeCode === 'dy'"
							:dataList="detailItem"
							:lookMsgList="lookMsgList"
						></eGameDetails>
						<regionalChain
							v-else-if="venueTypeCode === 'qkl'"
							:dataList="detailItem"
							:lookMsgList="lookMsgList"
						></regionalChain>
						<dzDetails
							v-else-if="venueTypeCode === 'DZ_CARD'"
							:dataList="detailItem"
							:parentBetTypes="parentBetTypes"
							:parentBetSubTypes="parentBetSubTypes"
							:lookMsgList="lookMsgList"
						></dzDetails>
						<slotDetails
							v-else
							:dataList="detailItem"
							:lookMsgList="lookMsgList"
						></slotDetails>
					</div>
				</div>
			</div>

			<div class="arrowStyel">
				<el-link
					:disabled="detailDialog.currentRecordIndex === 0"
					type="primary"
					:underline="false"
					@click="handlePrevOrNext(1)"
				>
					<i class="el-icon-d-arrow-left"></i>
					{{ $t('game.game_betslip.previous') }}
				</el-link>
				<div>
					<el-button @click="detailDialog.visible = false">
						{{ $t('member.close') }}
					</el-button>
				</div>
				<el-link
					:disabled="
						detailDialog.currentRecordIndex >= tableData.length - 1
					"
					type="primary"
					:underline="false"
					@click="handlePrevOrNext(2)"
				>
					{{ $t('game.game_betslip.next') }}

					<i class="el-icon-d-arrow-right"></i>
				</el-link>
			</div>
		</el-dialog>
		<!-- 投注详情 -->

		<el-dialog
			:title="cascading"
			:visible.sync="dialogGameVisible"
			:destroy-on-close="true"
			class="rempadding"
		>
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				size="mini"
				class="small-size-table"
				:data="gameList"
				style="width: 100%; margin: 15px 0"
				:header-cell-style="getRowClass"
			>
				<el-table-column
					prop="gameTypeName"
					align="center"
					:label="$t('member.game_id')"
				>
					<template slot-scope="scope">
						{{ scope.row.gameTypeName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="event"
					align="center"
					:label="$t('game.game_betslip.event')"
				>
					<template slot-scope="scope">
						{{ scope.row.event || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="playName"
					align="center"
					:label="$t('game.game_betslip.playName')"
				>
					<template slot-scope="scope">
						{{ scope.row.playName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="content"
					align="center"
					:label="$t('game.game_betslip.content')"
				>
					<template slot-scope="scope">
						{{ scope.row.content || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="marketType"
					align="center"
					:label="$t('game.game_betslip.marketType')"
				>
					<template slot-scope="scope">
						{{ scope.row.marketType || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="betAmount"
					align="center"
					:label="$t('game.game_betslip.bet_amount')"
				>
					<template slot-scope="scope">
						{{ handleCurrency(currency) }}
						{{ handleNumber(currency, scope.row.betAmount) }}
					</template>
				</el-table-column>
				<el-table-column
					prop="oddsValues"
					align="center"
					:label="$t('game.game_betslip.oddsValues')"
				>
					<template slot-scope="scope">
						{{ scope.row.oddsValues || '-' }}
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页
			<el-pagination
				:current-page.sync="page"
				background
				class="fenye"
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="size"
				:page-sizes="[5, 10, 15]"
				:total="summary"
				@current-change="handleCurrentChangeDialog"
				@size-change="handleSizeChangeDialog"
			></el-pagination> -->
		</el-dialog>
		<el-dialog
			:title="$t('common.row_set')"
			center
			:visible.sync="colSettings.visible"
			width="475px"
			class="setting-div"
		>
			<div>
				<el-link type="primary" class="mb15" @click="clickDel">
					复原缺省
				</el-link>
			</div>
			<div
				v-for="(value, name1) in activityListField"
				:key="name1"
				class="setting-div"
			>
				<el-checkbox v-model="dialogColumnData[name1]">
					{{ name1 }}
				</el-checkbox>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="colSettings.visible = false">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button type="primary" @click="handleOrderList">
					{{ $t('common.submit') }}
				</el-button>
			</div>
		</el-dialog>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { routerNames } from '@/utils/consts'
import { getVenueListWithoutPage } from '@/api//game'
import Money from './components/money.vue'
import notedetails from './components/Notedetails'
import realDetails from './components/realDetails'
import chessDetails from './components/chessDetails'
import sportDetails from './components/sportDetails'
import eSportDetails from './components/eSportDetails'
import lotteryDetails from './components/lotteryDetails'
import eGameDetails from './components/eGameDetails'
import slotDetails from './components/slotDetails'
import dzDetails from './components/dzDetails'
import regionalChain from './components/regionalChain'
import MainContent from '@/components/MainContent/index.vue'
import gameMixins from '../mixins/index'
import DatePickerShortcuts from '@/components/DatePickerShortcuts'
import summaryList from './components/summaryList'
const startTime = () =>
  dayjs()
    .startOf('day')
    .valueOf()
const endTime = () =>
  dayjs()
    .endOf('day')
    .valueOf()

export default {
  name: routerNames.abnormalGameBetslip,
  components: {
    notedetails,
    realDetails,
    chessDetails,
    sportDetails,
    eSportDetails,
    lotteryDetails,
    eGameDetails,
    slotDetails,
    regionalChain,
    dzDetails, // 德州详情
    Money,
    MainContent,
    DatePickerShortcuts
  },
  mixins: [list, gameMixins, summaryList],
  data() {
    return {
      tableHeight: 480,
      otherDependenComponents: [],
      activityListField: {
        [this.$t('game.game_betslip.bet_number')]: true,
        [this.$t('common.member_number')]: true,
        [this.$t('game.game_betslip.three_bet_number')]: true,
        [this.$t('game.venue_access_manage.venue_type')]: true,
        [this.$t('game.venue_name')]: true,
        [this.$t('game.game_manage.game_name')]: true,
        [this.$t('common.game_number')]: true,
        [this.$t('common.number_type')]: true,
        [this.$t('game.game_betslip.merchant_name')]: true,
        [this.$t('common.top_agent')]: true,
        [this.$t('game.game_betslip.general_agent')]: true,
        [this.$t('game.game_betslip.bet_amount')]: true,
        [this.$t('game.game_betslip.parent_betType')]: true,
		[this.$t('game.game_betslip.pump_contribution')]: true,
        [this.$t('game.game_betslip.pump_contribution_contribution')]: true,
        [this.$t('game.game_betslip.efficient_bet')]: true,
        [this.$t('game.game_betslip.member_win')]: true,
        [this.$t('game.game_betslip.bet_status')]: true,
        [this.$t('game.game_betslip.ob_settle_count')]: true,
        [this.$t('game.game_betslip.bet_time')]: true,
        [this.$t('game.game_betslip.settle_time')]: true,
        [this.$t('game.game_betslip.match_info')]: true,
        [this.$t('game.game_betslip.betting_details')]: true,
        [this.$t('game.game_betslip.bet_ip')]: true,
        [this.$t('game.game_betslip.ip_attribution')]: true,
        [this.$t('game.game_betslip.bet_device')]: true
      },
      exportLoading: false,
      currency: '',
      cascading: '',
      colSettings: {
        visible: false,
        dialogColumnData: {}
      },
      dialogGameVisible: false,
      gameList: [],
      detailDialog: {
        visible: false,
        currentRecordId: '',
        currentRecordIndex: ''
      },
      dataList: {},
      betHisDetails: [],
      lookMsgList: {},
      timeTypeOption: {
        betTime: [startTime(), endTime()],
        sunTime: [startTime(), endTime()],
        reTime: [startTime(), endTime()],
		statTime: [startTime(), endTime()]
      },
      timeType: 'betTime',
      orderType: 'id',
      memberType: 'memberName',
      queryData: {},
      now: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'),
      summary: {
        totalCount: 0,
        settledCount: 0,
        unSettledCount: 0,
        betAmount: { cnySum: 0, thbSum: 0, vndSum: 0 },
        netAmount: { cnySum: 0, thbSum: 0, vndSum: 0 },
        validBetAmount: { cnySum: 0, thbSum: 0, vndSum: 0 },
        currPageBetAmount: 0,
        currPageNetAmount: 0,
        pumpContributionAmount: { cnySum: 0, thbSum: 0, vndSum: 0 },
        currPageValidBetAmount: 0
      },
      tableData: [],
      venueTypeCode: 'init',
      dialogFormdata: {},
      dialogFormVisible: false,
      dialogForm: {},
      siteType: 'appId',
      bwVenueList: [],
      parentBetTypes: {},
      parentBetSubTypes: {}
    }
  },
  computed: {
    dayjs() {
      return dayjs
    },
    // 场馆类型
    bwVenueTypeList() {
      return this.globalDics.bwVenueTypeList || []
    },
    accountType() {
      return this.globalDics.accountType || []
    },
    betDeviceType() {
      return this.globalDics.loginDeviceType || []
    },
    betStatusType() {
      return (
        this.globalDics.betStatusType?.filter((item) => {
          if (this.isReset) {
            return item.code !== '0'
          }
          return true
        }) || []
      )
    },
    appIdArr() {
      return this.globalDics.appId || []
    }
  },
  watch: {
    memberType() {
      this.$set(this.queryData, 'memberName', '')
      this.$set(this.queryData, 'playerName', '')
      this.$set(this.queryData, 'parentProxyName', '')
      this.$set(this.queryData, 'topProxyName', '')
      this.$set(this.queryData, 'proxyName', '')
    },
    orderType() {
      this.$set(this.queryData, 'id', '')
      this.$set(this.queryData, 'generatedId', '')
    }
  },
  created() {
    this.initIndexDB('gameBetslipTable', this.activityListField)
  },
  mounted() {
    // this.getGameTypeList()
    this.getBwVenueList()
    this.getGameRecoedTypeSection()
  },
  methods: {
    // 查询注单类型
    async getGameRecoedTypeSection() {
	  this.isReset = false
      try {
        const res = await this.$api.getGameRecoedTypeSection()
        if (res.code === 200 && res.data) {
          res.data.forEach((item) => {
            // this.parentBetTypes[item.type] = item.desc

            if (item.subList && item.subList.length > 0) {
              this.parentBetSubTypes[item.type] = {}
              item.subList.forEach((subItem) => {
                if (subItem.type == 1) {
                  subItem.desc = '俱乐部游戏'
                }
                this.parentBetTypes[subItem.type] = subItem.desc
                this.parentBetSubTypes[item.type][
                  subItem.type
                ] = subItem.desc
              })
            }
          })
        }
      } catch (err) {
        throw err
      }
    },
    handleShortcutBtnClick(val) {
      this.timeTypeOption[this.timeType] = val
      this.loadData()
    },
    // 获取场馆列表
    getBwVenueList() {
      getVenueListWithoutPage().then((res) => {
        if (res.data && res.data.length > 0) {
          this.bwVenueList = res.data
        }
      })
    },
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background:#EFEFEF; text-align: center'
      } else {
        return ''
      }
    },
    getCurrency(key) {
      const currencyMap = {
        thbSum: { id: 'th', currency: 'THB' },
        cnySum: { id: 'zh', currency: 'CNY' },
        vndSum: { id: 'vn', currency: 'VND' },
        usdtSum: { id: 'usd', currency: 'USD' }
      }
      const map = currencyMap[key]
      return map ? map.currency : ''
    },
    getParams(params) {
      return Object.keys(params).reduce((prev, next) => {
        if (params[next] !== '') {
          prev[next] = params[next]
        }
        return prev
      }, {})
    },
    loadData() {
      this.loading = true
      const create = this.timeTypeOption.betTime || []
      const net = this.timeTypeOption.sunTime || []
      const re = this.timeTypeOption.reTime || []
	  const stat = this.timeTypeOption.statTime || []
      const [startTime, endTime] = create
      const [netAtStart, netAtEnd] = net
      const [reStart, reEnd] = re
	  const [statStart, statEnd] = stat
      const time = {}

      if (this.timeType === 'betTime') {
        Object.assign(time, {
          createAtStart: startTime
            ? dayjs(startTime).format('YYYY-MM-DD HH:mm:ss')
            : '',
          createAtEnd: endTime
            ? dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')
            : ''
        })
      }

      if (this.timeType === 'sunTime') {
        Object.assign(time, {
          netAtStart: netAtStart
            ? dayjs(netAtStart).format(
              'YYYY-MM-DD HH:mm:ss'
            )
            : '',
          netAtEnd: netAtEnd
            ? dayjs(netAtEnd).format('YYYY-MM-DD HH:mm:ss')
            : ''
        })
      }

      if (this.timeType === 'reTime') {
        Object.assign(time, {
          reNetAtStart: reStart
            ? dayjs(reStart).format(
              'YYYY-MM-DD HH:mm:ss'
            )
            : '',
          reNetAtEnd: reEnd
            ? dayjs(reEnd).format('YYYY-MM-DD HH:mm:ss')
            : ''
        })
      }

	  const statisticalAtStart = statStart ? dayjs(statStart).format('YYYY-MM-DD HH:mm:ss') : ''
	  const statisticalAtEnd = statEnd ? dayjs(statEnd).format('YYYY-MM-DD HH:mm:ss') : ''
	  if (this.timeType === 'statTime') {
		Object.assign(time, {
			statisticalAtStart,
			statisticalAtEnd
		})
	  }

      let params = {
        ...this.queryData,
        ...time
      }
      params[this.siteType] = params.appType
      params = {
        ...this.getParams(params)
      }
      delete params.appType
      if (params.configVipRebateMin > 0) {
        params.configVipRebateMin = (
          params.configVipRebateMin / 100
        ).toFixed(4)
      }
      if (params.configVipRebateMax > 0) {
        params.configVipRebateMax = (
          params.configVipRebateMax / 100
        ).toFixed(4)
      }
      if (startTime || endTime || netAtStart || netAtEnd || statisticalAtStart || statisticalAtEnd) {
        this.fetchApi({
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          ...params
        })
          .then((res) => {
            this.loading = false
            const {
              data: { record, totalRecord, summary }
            } = res || {}
            if (res?.code === 200) {
              this.tableData = Array.isArray(record)
                ? Object.freeze(record)
                : []
              this.total = totalRecord || 0
			//   Primo TODO::
			  this.tableData = this.tableData.length ? this.tableData : [{
					delayStatus: 1,
					statTime: '2024-07-03 12:09:33'
				}]
              this.now = dayjs(new Date()).format(
                'YYYY-MM-DD HH:mm:ss'
              )
              const initSummary = {
                totalCount: 0,
                settledCount: 0,
                unSettledCount: 0,
                betAmount: { cnySum: 0, thbSum: 0, vndSum: 0 },
                netAmount: { cnySum: 0, thbSum: 0, vndSum: 0 },
                validBetAmount: {
                  cnySum: 0,
                  thbSum: 0,
                  vndSum: 0
                },
                pumpContributionAmount: {
                  cnySum: 0,
                  thbSum: 0,
                  vndSum: 0
                },
                currPageBetAmount: 0,
                currPageNetAmount: 0,
                currPageValidBetAmount: 0
              }
              this.summary = summary || initSummary
              this.summary.totalCount = this.total
            }
          })
          .catch(() => {
            this.loading = false
          })
      } else {
        this.loading = false
        this.$message.warning(this.$t('game.game_betslip.message1'))
      }
    },
    reset() {
      this.queryData = {}
      this.timeType = 'betTime'
      this.orderType = 'id'
      this.memberType = 'memberName'
      this.timeTypeOption.sunTime = [startTime(), endTime()]
      this.timeTypeOption.betTime = [startTime(), endTime()]
      this.pageNum = 1
      this.loadData()
    },
    _changeTableSort({ prop, order }) {
      console.log(prop)
      const obj = {
        betAmount: 1,
        netAmount: 3,
        validBetAmount: 2
        // createAt: 3,
        // netAt: 4,
        // vipRebateRate: 5,
        // rebateAmount: 6,
        // startTime: 8,
        // maxWin: 9
      }
      this.queryData.orderKey = obj[prop]
      if (order === 'ascending') {
        // 升序
        this.queryData.orderType = '1'
      } else if (order === 'descending') {
        // 降序
        this.queryData.orderType = '2'
      } else {
        delete this.queryData.orderKey
        delete this.queryData.orderType
      }
      this.loadData()
    },
    checkValue(e) {
      const { name, value } = e.target
      switch (name) {
        case 'betAmountMin':
          if (value && value * 1 > this.queryData.betAmountMax * 1) {
            this.$message({
              type: 'warning',
              message: this.$t('game.game_betslip.message2')
            })
            this.queryData.betAmountMin = undefined
          } else if (value !== '' && value * 1 >= 0) {
            // console.log('6465456464', value * 1)
            this.queryData.betAmountMin = value
          } else {
            this.queryData.betAmountMin = undefined
          }
          break
        case 'betAmountMax':
          if (value && value * 1 < this.queryData.betAmountMin * 1) {
            this.$message({
              type: 'warning',
              message: this.$t('game.game_betslip.message3')
            })
            this.queryData.betAmountMax = undefined
          } else if (value !== '' && value * 1 >= 0) {
            this.queryData.betAmountMax = value
          } else {
            this.queryData.betAmountMax = undefined
          }
          break
        case 'netAmountMin':
          if (value && value * 1 > this.queryData.netAmountMax * 1) {
            this.$message({
              type: 'warning',
              message: this.$t('game.game_betslip.message4')
            })
            this.queryData.netAmountMin = undefined
          } else if (value !== '') {
            // console.log('6465456464', value * 1)
            this.queryData.netAmountMin = value
          } else {
            this.queryData.netAmountMin = undefined
          }
          break
        case 'netAmountMax':
          if (value && value * 1 < this.queryData.netAmountMin * 1) {
            this.$message({
              type: 'warning',
              message: this.$t('game.game_betslip.message5')
            })
            this.queryData.netAmountMax = undefined
          } else if (value !== '') {
            this.queryData.netAmountMax = value
          } else {
            this.queryData.netAmountMax = undefined
          }
          break
        case 'vipLevelMin':
          if (value && value * 1 > this.queryData.vipLevelMax * 1) {
            this.$message({
              type: 'warning',
              message: this.$t('game.game_betslip.message6')
            })
            this.queryData.vipLevelMin = undefined
          } else if (value !== '' && value * 1 >= 0) {
            this.queryData.vipLevelMin = value
          } else {
            this.queryData.vipLevelMin = undefined
          }
          break
        case 'vipLevelMax':
          if (value && value * 1 < this.queryData.vipLevelMin * 1) {
            this.$message({
              type: 'warning',
              message: this.$t('game.game_betslip.message7')
            })
            this.queryData.vipLevelMax = undefined
          } else if (value !== '' && value * 1 >= 0) {
            this.queryData.vipLevelMax = value
          } else {
            this.queryData.vipLevelMax = undefined
          }
          break
        case 'configVipRebateMin':
          if (
            value &&
            value * 1 > this.queryData.configVipRebateMax * 1
          ) {
            this.$message({
              type: 'warning',
              message: this.$t('game.game_betslip.message8')
            })
            this.queryData.configVipRebateMin = undefined
          } else if (value !== '' && value * 1 >= 0) {
            this.queryData.configVipRebateMin = value
          } else {
            this.queryData.configVipRebateMin = undefined
          }
          break
        case 'configVipRebateMax':
          if (
            value &&
            value * 1 < this.queryData.configVipRebateMin * 1
          ) {
            this.$message({
              type: 'warning',
              message: this.$t('game.game_betslip.message9')
            })
            this.queryData.configVipRebateMax = undefined
          } else if (value !== '' && value * 1 >= 0) {
            this.queryData.configVipRebateMax = value
          } else {
            this.queryData.configVipRebateMax = undefined
          }
          break
        case 'rebateAmountMin':
          if (
            value &&
            value * 1 > this.queryData.rebateAmountMax * 1
          ) {
            this.$message({
              type: 'warning',
              message: this.$t('game.game_betslip.message10')
            })
            this.queryData.rebateAmountMin = undefined
          } else if (value !== '' && value * 1 >= 0) {
            this.queryData.rebateAmountMin = value
          } else {
            this.queryData.rebateAmountMin = undefined
          }
          break
        case 'rebateAmountMax':
          if (
            value &&
            value * 1 < this.queryData.rebateAmountMin * 1
          ) {
            this.$message({
              type: 'warning',
              message: this.$t('game.game_betslip.message11')
            })
            this.queryData.rebateAmountMax = undefined
          } else if (value !== '' && value * 1 >= 0) {
            this.queryData.rebateAmountMax = value
          } else {
            this.queryData.rebateAmountMax = undefined
          }
          break
        case 'validBetAmountMin':
          if (
            value &&
            value * 1 > this.queryData.validBetAmountMax * 1
          ) {
            this.$message({
              type: 'warning',
              message: this.$t('game.game_betslip.message10')
            })
            this.queryData.validBetAmountMin = undefined
          } else if (value !== '' && value * 1 >= 0) {
            this.queryData.validBetAmountMin = value
          } else {
            this.queryData.validBetAmountMin = undefined
          }
          break
        case 'validBetAmountMax':
          if (
            value &&
            value * 1 < this.queryData.validBetAmountMin * 1
          ) {
            this.$message({
              type: 'warning',
              message: this.$t('game.game_betslip.message11')
            })
            this.queryData.validBetAmountMax = undefined
          } else if (value !== '' && value * 1 >= 0) {
            this.queryData.validBetAmountMax = value
          } else {
            this.queryData.validBetAmountMax = undefined
          }
          break
      }
    },
    exportExcel() {
      const create = this.timeTypeOption.betTime || []
      const net = this.timeTypeOption.sunTime || []
      const re = this.timeTypeOption.reTime || []
      const [startTime, endTime] = create
      const [netAtStart, netAtEnd] = net
      const [reStart, reEnd] = re
      const time = {}
      if (this.timeType === 'betTime') {
        Object.assign(time, {
          createAtStart: startTime
            ? dayjs(startTime).format('YYYY-MM-DD HH:mm:ss')
            : '',
          createAtEnd: endTime
            ? dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')
            : ''
        })
      }

      if (this.timeType === 'sunTime') {
        Object.assign(time, {
          netAtStart: netAtStart
            ? dayjs(netAtStart).format(
              'YYYY-MM-DD HH:mm:ss'
            )
            : '',
          netAtEnd: netAtEnd
            ? dayjs(netAtEnd).format('YYYY-MM-DD HH:mm:ss')
            : ''
        })
      }

      if (this.timeType === 'reTime') {
        Object.assign(time, {
          reNetAtStart: reStart
            ? dayjs(reStart).format(
              'YYYY-MM-DD HH:mm:ss'
            )
            : '',
          reNetAtEnd: reEnd
            ? dayjs(reEnd).format('YYYY-MM-DD HH:mm:ss')
            : ''
        })
      }
      let params = {
        ...this.queryData,
        ...time
      }
      params = {
        ...this.getParams(params)
      }
      if (params.configVipRebateMin > 0) {
        params.configVipRebateMin = (
          params.configVipRebateMin / 100
        ).toFixed(4)
      }
      if (params.configVipRebateMax > 0) {
        params.configVipRebateMax = (
          params.configVipRebateMax / 100
        ).toFixed(4)
      }
      if (startTime || endTime || netAtStart || netAtEnd) {
        this.exportLoading = true
        this.fetchExportExcel(params).finally(() => {
          this.exportLoading = false
        })
        // this.$confirm(
        // 	`<strong>${this.$t(
        // 		'game.game_betslip.whether_export'
        // 	)}</strong></br><span style='font-size:12px;color:#c1c1c1'>${this.$t(
        // 		'game.game_betslip.export_tips'
        // 	)}</span>`,
        // 	this.$t('common.success_tip'),
        // 	{
        // 		dangerouslyUseHTMLString: true,
        // 		confirmButtonText: this.$t('common.confirm'),
        // 		cancelButtonText: this.$t('common.cancel'),
        // 		type: 'warning'
        // 	}
        // )
        // 	.then(() => {
        // 		this.$api
        // 			.gameRecordsListExport(params)
        // 			.then((res) => {
        // 				this.loading = false
        // 				const { data, status } = res || {}
        // 				if (res && status && status === 200) {
        // 					const { type = [] } = data || {}
        // 					if (type.includes('application/json')) {
        // 						const reader = new FileReader()
        // 						reader.onload = (evt) => {
        // 							if (
        // 								evt &&
        // 								evt.target.readyState === 2
        // 							) {
        // 								const {
        // 									target: { result }
        // 								} = evt
        // 								const ret = JSON.parse(result)
        // 								if (ret && ret.code !== 200) {
        // 									this.$message({
        // 										type: 'error',
        // 										message: ret.msg,
        // 										duration: 1500
        // 									})
        // 								}
        // 							}
        // 						}
        // 						reader.readAsText(data)
        // 					} else {
        // 						const result = res.data
        // 						const disposition =
        // 							res.headers['content-disposition']
        // 						const fileNames =
        // 							disposition &&
        // 							disposition.split("''")
        // 						let fileName = fileNames[1]
        // 						fileName = decodeURIComponent(fileName)
        // 						const blob = new Blob([result], {
        // 							type: 'application/octet-stream'
        // 						})
        // 						if (
        // 							'download' in
        // 							document.createElement('a')
        // 						) {
        // 							const downloadLink = document.createElement(
        // 								'a'
        // 							)
        // 							downloadLink.download =
        // 								fileName || ''
        // 							downloadLink.style.display = 'none'
        // 							downloadLink.href = URL.createObjectURL(
        // 								blob
        // 							)
        // 							document.body.appendChild(
        // 								downloadLink
        // 							)
        // 							downloadLink.click()
        // 							URL.revokeObjectURL(
        // 								downloadLink.href
        // 							)
        // 							document.body.removeChild(
        // 								downloadLink
        // 							)
        // 						} else {
        // 							window.navigator.msSaveBlob(
        // 								blob,
        // 								fileName
        // 							)
        // 						}
        // 						this.$message({
        // 							type: 'success',
        // 							message: this.$t(
        // 								'common.export_success'
        // 							),
        // 							duration: 1500
        // 						})
        // 					}
        // 				}
        // 			})
        // 			.catch(() => {
        // 				this.loading = false
        // 				this.$message({
        // 					type: 'error',
        // 					message: this.$t('common.export_err'),
        // 					duration: 1500
        // 				})
        // 			})
        // 	})
        // 	.catch(() => {})
      } else {
        this.$message.warning(this.$t('game.game_betslip.message1'))
      }
    },
    goBack() {
      this.venueTypeCode = 'init'
    },
    enterSubmit() {
      this.loadData()
    },
    // 查看详情
    lookMsg(val, index) {
      this.lookMsgList = val
      this.venueTypeCode = val.venueTypeCode
      this.detailDialog.visible = true
      this.detailDialog.currentRecordId = val.id
      this.detailDialog.currentRecordIndex = index
      this.pageScrollTop =
        document.documentElement.scrollTop || document.body.scrollTop
      this.getdetailsdata(val, 1)
    },
    handlePrevOrNext(type) {
      // type 1 上一条  2下一条
      const index =
        type === 1
          ? this.detailDialog.currentRecordIndex - 1
          : this.detailDialog.currentRecordIndex + 1

      if (this.tableData[index]) {
        this.detailDialog.currentRecordIndex = index
        this.getdetailsdata(this.tableData[index], 1)
      }
    },
    getdetailsdata(val, flag) {
      const data = {}
      data.id = val.id
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.dataList = {}
      this.betHisDetails = []
      // 是否重算
      if (val.obSettleCount > 0 && flag === 1 && !this.isReset) {
        this.$api
          .getResettlementGameRecordDetails(data)
          .then((res) => {
            if (res.code === 200) {
              this.betHisDetails = res.data.betHisDetails
              this.dataList = res.data
            }
            loading.close()
          })
          .catch(() => {
            loading.close()
          })
        return
      }
      this.fetchDetailApi(data)
        .then((res) => {
          if (res?.code === 200) {
            this.dataList = res.data
            this.gameList = res.data.betDetails
            this.betHisDetails = [res.data]

            if (flag === 1) {
              this.detailDialog.visible = true
              this.venueTypeCode = val.venueTypeCode || 'init'
            } else {
              this.dialogFormVisible = true
            }
            loading.close()
          }
        })
        .catch(() => {
          loading.close()
        })
    },
    // 投注详情
    lookBetting(val) {
      this.currency = val.memberCurrency
      this.cascading = val.betContent
      this.dialogGameVisible = true
      this.getdetailsdata(val)
    },
    search() {
      this.pageNum = 1
      this.loadData()
    },
    // 提交列设置数据
    handleOrderList() {
      this.colSettings.visible = false
      this.updateIndexDB()
    },
    // 打开列设置弹框
    openColSettings() {
      this.getIndexDB(this.activityListField)
      this.colSettings.visible = true
    },
    clickDel() {
      const activityListColumn = {}
      Object.keys(this.activityListField).forEach((item) => {
        activityListColumn[item] = true
      })
      this.dialogColumnData = Object.assign({}, activityListColumn)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .tagheight .el-tag {
	height: 24px;
	line-height: 24px;
	min-width: 60px;
}
.bet-details-dialog {
	::v-deep th {
		color: #ffff;
		background: #000;
		border: 1px solid #000;
		line-height: 1;
	}
}

.msgList {
	font-size: 14px;
	display: flex;
	line-height: 24px;
	text-align: center;
	p {
		margin-right: 20px;
	}
	&:last-child p {
		margin-bottom: 15px;
	}
}
// .view-container {
// 	border: 1px solid #dcdfe6;
// 	font-size: 14px;
// }
.review-content {
	line-height: 30px;
}
.paddingLR {
	padding: 0 30px;
}
.head {
	height: 70px;
	line-height: 70px;
	width: 100%;
	background: #000;
	border-radius: 2px;
	display: flex;
	justify-content: space-between;
	.title {
		font-weight: 600;
		font-size: 16px;
		color: rgb(192, 190, 190);
	}
	.right-btn {
		float: right;
	}
}
.strong {
	height: 70px;
	line-height: 80px;
}
.paddingB {
	padding-bottom: 30px;
}
.arrowStyel {
	display: flex;
	justify-content: space-around;
}

.vi_VN,
.en_US {
	.game-container {
		margin-left: 0;
		margin-right: 0;

		::v-deep .betslip {
			padding-left: 0;
			padding-right: 0;
		}
	}
}

::v-deep .footer_count_row {
	min-height: 40px;
	height: 50%;
	display: flex;
	font-weight: 700;
	padding: 5px 0;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}
::v-deep .footer_count_row_border {
	border-top: 1px solid #ebeef5;
}
</style>
